<template>
    <PageLayout>
        <!-- 表格布局 -->
        <TableContainer height="calc(100vh - 100px)">
            <TableLayout ref="tableLayout" :loader="getList" tableRowKey="id" @reset="reset">
                <!-- 头部搜索 -->
                <template #header>
                    <el-form ref="queryRef" :inline="true" :model="queryParams" label-width="75px" class="header-form">
                    
            <el-form-item
                label="软件名称"
                prop="name"
            >
                <el-input
                    v-model="queryParams.name"
                    style="width:160px"
                    clearable
                    placeholder="请输入软件名称"
                    @input="handleQuery"
                />
            </el-form-item>
        
          
            <el-form-item
                label="软件编号"
                prop="code"
            >
                <el-input
                    v-model="queryParams.code"
                    style="width:160px"
                    clearable
                    placeholder="请输入软件编号"
                    @input="handleQuery"
                />
            </el-form-item>
        
          
            <el-form-item
                label="软件分类"
                prop="softType"
            >
                <el-select
                    v-model="queryParams.softType"
                    style="width: 160px"
                    clearable
                    @change="handleQuery"
                >
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                    <el-option label="选项三" value="2"></el-option>
                </el-select>
            </el-form-item>
        
          
            <el-form-item
                label="管理人员"
                prop="managerId"
            >
                <el-select
                    v-model="queryParams.managerId"
                    style="width: 160px"
                    clearable
                    @change="handleQuery"
                >
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                    <el-option label="选项三" value="2"></el-option>
                </el-select>
            </el-form-item>
        
                    </el-form>
                </template>

                <!-- 操作栏--左 -->
                <template #operator-left>
                    <el-button type="warning" plain @click="handleExport">导 出</el-button>
                    <el-button type="primary" plain @click="handleAdd">新 增</el-button>
                </template>

                <!-- 操作栏-右 -->
                <template #operator-right>
                    <TableOperatorSort
                        :list="sortableHeader"
                        isDrag
                        paramKey="value"
                        @column-change="handleColumnChange"
                        @drag-end="handleDragEnd"
                    ></TableOperatorSort>
                </template>
                <!-- 列表 -->
                <template #columns>
                    <TableColumn label="序号" type="order" width="55"></TableColumn>
                    <template v-for="(column, i) in tableHeader" :key="column.value + i">
                        <TableColumn
                            :label="column.label"
                            :prop="column.value"
                            :width="column.width"
                            :fixed="column.fixed"
                            min-width="120"
                            showOverflowTooltip
                        >
                            <template v-if="column.key == 'name'" #default="{ row }">
                                <span class="link-title" @click="handlePreview(row)">
                                    {{ row.name }}
                                </span>
                            </template>
                            <template v-else-if="column.key == 'type'" #default="{ row }">
                                <span v-if="row.type == 1">类型一</span>
                                <span v-else-if="row.type == 2">类型二</span>
                                <span v-else-if="row.type == 3">类型三</span>
                                <span v-else>--</span>
                            </template>
                        </TableColumn>
                    </template>
                    <TableColumn fixed="right" label="操作" width="160">
                        <template #default="{ row }">
                            <TableAction>
                                <TableActionItem @click="handleUpdate(row)">编辑</TableActionItem>
                                <TableActionItem type="danger" @click="handleDelete(row)">删除</TableActionItem>
                            </TableAction>
                        </template>
                    </TableColumn>
                </template>
            </TableLayout>
        </TableContainer>

        <!-- 新增和编辑 -->
        <CopyAssetsAddEdit ref="addEditRef" @refresh="handleQuery" />

        <!-- 详情 -->
        <CopyAssetsDetail ref="detailRef" />
    </PageLayout>
</template>

<script setup name="copy-assets">
import { getInstanceList, deleteInstance } from './service';
import { reactive } from 'vue';
import CopyAssetsAddEdit from './components/CopyAssetsAddEdit.vue';
import CopyAssetsDetail from './components/CopyAssetsDetail.vue';
import columnConfig from './column';
import { useColumns } from '@opro/vhook';
import { getTableConfig, updateTableConfig } from '@/api/table/table';

const { proxy } = getCurrentInstance();
const addEditRef = ref();

const { tableHeader, sortableHeader, handleColumnChange, handleDragEnd } = useColumns(
    'copy-assets_1751201087332',
    columnConfig,
    'value',
    proxy,
    getTableConfig,
    updateTableConfig,
);

const queryParams = reactive({
    name: null,
          code: null,
          softType: null,
          managerId: null,
    page: 1,
    pageSize: 20,
});

const tableLayout = ref();

function handleQuery() {
    queryParams.page = 1;
    tableLayout.value.refresh();
}

function reset() {
    queryParams.name = null;
          queryParams.code = null;
          queryParams.softType = null;
          queryParams.managerId = null;
    queryParams.page = 1;
    queryParams.pageSize = 20;
    tableLayout.value.refresh();
}

async function getList(params) {
    const res = await getInstanceList({ ...queryParams, ...params });
    return { records: res.rows || [], total: res.total || 0 };
}

function handleExport() {
      proxy.download('/supplies/intangibleSoftwareInfo/intangibleSoftwareInfoExport', {
    ...queryParams.value
  }, '版权资产_1751201087332.xlsx')
}

function handleAdd() {
    addEditRef.value?.open();
}

function handleUpdate(row) {
    addEditRef.value?.open(row);
}

const detailRef = ref(null);

function handlePreview(row) {
    detailRef.value?.open(row);
}

async function handleDelete(row) {
    await proxy.$modal.confirm('确定删除？');
    const result = await deleteInstance(row.id);
    if (result.code === 200) {
        proxy.$modal.msgSuccess('删除成功');
        tableLayout.value.refresh();
    } else {
        proxy.modal.msgError(result.msg);
    }
}

function getTableData() {
    handleQuery();
}
</script>
<style lang="scss" scoped>
.header-form {
    .el-form-item {
        margin-bottom: 0;
    }
}
.link-title {
    color: #409eff;
    cursor: pointer;
    user-select: none;
}

.link-title:hover {
    color: #66b1ff;
}

</style>